<template>
  <div class="picture-list">
    <div v-masonry>
      <!-- 这里是你的每个独特的项目内容 -->
      <div v-masonry-tile v-for="(item, index) in imgList" :key="index">
        <img
          :src="'data:image/png;base64,' + item.img"
          alt=""
          @click="$refs.imageBig.showFn(item.img)"
        />
      </div>
    </div>
    <imageBig ref="imageBig"></imageBig>
  </div>
</template>

<script type="link">

import { getImage } from '@/api/content.js'
import imageBig from './imageBig.vue'

export default {
  components: {
    imageBig
  },
  data () {
    return {
      imgList: [], // 图片列表

    };
  },
  mounted () {
    this.getImg()
  },
  methods: {
    getImg () {
      const userId = sessionStorage.getItem('userId')
      getImage({
        userId: userId
      }).then(res => {
        if (res.success) {

          this.$nextTick(() => {
            this.imgList = res.data
          });
        }
      })
    }
  }
};
</script>

<style scoped>
.picture-list {
  height: 100%;
}

.picture-list img {
  max-width: 300px;
  margin: 5px; /* 这会在砌体砖块之间加上间距 */
}

.v-masonry-tile {
  padding: 10px; /* 这会给砌体砖块周围加上一些空间 */

  box-sizing: border-box; /* 这确保了内边距和边距不会影响砌体砖块的总尺寸 */
  transition: transform 0.5s ease;
}
</style>